<template>
  <PageWrapper>
    <BasicTable @register="register">
      <template #tableTitle>
        <TableAction
          :actions="[
            {
              label: '新增',
              type: 'primary',
              size: 'middle',
              icon: 'ant-design:plus-outlined',
              onClick: handleAdd.bind(null, {}),
              auth: ['admin', 'sys:config:save'],
            },
          ]"
          :dropDownActions="[
            {
              label: '批量删除',
              icon: 'ant-design:delete-outlined',
              popConfirm: {
                title: '您确定删除这几条记录吗？',
                confirm: handleDelete.bind(null, undefined),
              },
              ifShow: mSelectedRowKeys.length > 0,
              auth: ['admin', 'sys:config:remove'],
            },
          ]"
        >
          <template #more>
            <a-button style="margin-left: 8px">更多操作</a-button>
          </template>
        </TableAction>
      </template>
      <template #bodyCell="{ column, record }">
        <div v-if="column.dataIndex == '__ACTION__'">
          <TableAction
            :actions="[
              {
                label: '详情',
                auth: ['admin', 'sys:config:detail'],
                onClick: handleDetail.bind(null, record),
              },
              {
                label: '编辑',
                auth: ['admin', 'sys:config:update'],
                onClick: handleEdit.bind(null, record),
              },
            ]"
            :dropDownActions="[
              {
                label: '删除',
                popConfirm: {
                  title: '您确定删除该条记录吗？',
                  confirm: handleDelete.bind(null, record),
                },
                auth: ['admin', 'sys:config:remove'],
                icon: 'ant-design:delete-outlined',
              },
            ]"
          />
        </div>
      </template>
    </BasicTable>
    <ConfigFormModal @register="registerModal" @success="reload" />
    <ConfigDetailModal @register="registerDetailModal" />
  </PageWrapper>
</template>
<script setup lang="ts">
  import { PageWrapper } from '@/components/Page';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { useModal } from '@/components/Modal';
  import { sysConfigPage, sysConfigRemove } from '@/api/sys/config';
  import { tableColumns, searchFormSchemas } from './schemas';
  import ConfigFormModal from './form.vue';
  import ConfigDetailModal from './detail.vue';
  import { message } from 'ant-design-vue';
  import { ref } from 'vue';

  const mSelectedRowKeys = ref<any[]>([]);
  const [register, tableAction] = useTable({
    rowKey: 'id',
    api: sysConfigPage,
    columns: tableColumns,
    showIndexColumn: false,
    showTableSetting: true,
    useSearchForm: searchFormSchemas.length > 0,
    formConfig: {
      // 搜索表单配置
      labelWidth: 100,
      schemas: searchFormSchemas,
    },
    rowSelection: {
      type: 'checkbox',
      onChange(selectedRowKeys) {
        mSelectedRowKeys.value = selectedRowKeys;
      },
    },
    customRow: undefined,
  });
  const { reload, setSelectedRowKeys } = tableAction;
  const [registerModal, { openModal, setModalProps }] = useModal();
  const [registerDetailModal, { openModal: openDetailModal }] = useModal();
  const handleAdd = (record: any) => {
    openModal(true, {
      isUpdate: false,
      record,
    });
    setModalProps({
      title: '新增配置',
    });
  };
  const handleEdit = (record: any) => {
    openModal(true, {
      isUpdate: true,
      record,
    });
    setModalProps({
      title: '修改配置',
    });
  };
  const handleDetail = (record: any) => {
    openDetailModal(true, {
      record,
    });
  };
  const handleDelete = (record: any) => {
    const ids = record ? [record.id] : mSelectedRowKeys.value;
    sysConfigRemove({
      ids: ids,
    }).then(() => {
      message.success('删除成功');
      setSelectedRowKeys([]);
      reload();
    });
  };
</script>
<style lang="less" scoped></style>
